<template>
  
    <h1>
      订单详情
    </h1>
  <div class="descriptions">
    <el-descriptions direction="vertical" :column="4" :size="size" :data="orderinfo_list" border>
      <el-descriptions-item label="用户id">{{ orderinfo_list.user_id }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ orderinfo_list.username }}</el-descriptions-item>
      <el-descriptions-item label="联系方式">{{ orderinfo_list.phone }}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{ orderinfo_list.order_number }}</el-descriptions-item>
      <el-descriptions-item label="订单创建时间">{{ orderinfo_list.order_date }}</el-descriptions-item>
      <el-descriptions-item label="支付状态">
        {{ orderinfo_list.pay? "已支付" : "未支付" }}
      </el-descriptions-item>
      <el-descriptions-item label="宠物种类">{{ orderinfo_list.good_specific }}</el-descriptions-item>
      <el-descriptions-item label="宠物名称">{{ orderinfo_list.pet_name }}</el-descriptions-item>
      <el-descriptions-item label="数量">{{ orderinfo_list.product_number }}</el-descriptions-item>
      <el-descriptions-item label="快递状态">
        {{ orderinfo_list.deliver? "已发货" : "未发货" }}
      </el-descriptions-item>
      <el-descriptions-item label="发货时间"> {{ orderinfo_list.deliver? orderinfo_list.deliver_date :  "未发货"}}</el-descriptions-item>
      <el-descriptions-item label="收货地址">{{ orderinfo_list.address }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ orderinfo_list.remakes == null? "暂无" : orderinfo_list.remake }}</el-descriptions-item>
      </el-descriptions>
  </div>
  <el-button @click="returnPage()">返回</el-button>
</template>

<script>
import { onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  inject:['reload'],
  data(){
    return{
      //订单信息
      orderinfo_list: [],
      order_number: 0,
      animalinfo_list: [],
      order: {},
      pageFrom: 0
    }
  },
  created(){
    this.getorderinfo_list()
  },
  methods:{
    //订单信息
    getorderinfo_list(){
      onMounted(async() => {
          axios.get("http://127.0.0.1:8080/order/get/" + this.order_number)
          .then(response => {
            // 处理成功情况
            this.orderinfo_list=response.data.data
            console.log(this.orderinfo_list)
            this.orderinfo_list.username = JSON.parse(localStorage.getItem("user")).username
            this.orderinfo_list.phone = JSON.parse(localStorage.getItem("user")).phone
            axios.get("http://127.0.0.1:8080/animal/" + this.orderinfo_list.product_id)
            .then(response => {
              this.animalinfo_list = response.data.data
              this.orderinfo_list.good_specific = this.animalinfo_list.good_specific
              this.orderinfo_list.pet_name = this.animalinfo_list.name
              console.log(this.animalinfo_list)
            })
            .catch(error => {
              console.log("商品信息查询失败")
            })
            console.log(this.orderinfo_list)
          })
          .catch(error => {
            //处理错误
            console.log(error)
          })
        })
    },
    //返回至订单列表
    returnPage(){
      this.$router.push({path:"/personal",query:{from:this.pageFrom}})
      this.reload()
    }
  },
  beforeMount() {
    this.order = JSON.parse(this.$route.query.order)
    this.pageFrom = this.order.fromPage
    this.order_number = this.order.id //获取订单id
  }
}
</script>

<style>
.descriptions{
  justify-content: center;
  display: flex;
}
</style>